<template>
  <div ref="appRef" class="allPage">
    <div class="bg">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <div class="host-body">
        <div>
          <!-- 顶部title部分 -->
          <el-row>
            <el-col :span="6">
              <div class="title_time">{{getDate()}}</div>
              <dv-decoration-8 class="title_left" :color="['#008CFF', '#00ADDD']"/>
            </el-col>
            <el-col :span="12"><div class="title_text">安全守护控制平台大屏</div>
              <dv-decoration-5 class="title_center" :color="['#008CFF', '#00ADDD']"/></el-col>
            <el-col :span="6">
              <div style="float: right;margin-right: 100px;margin-top: 10px;">
                <img src="../../../assets/img/quanping.png" style="width:20px;height:20px;cursor:pointer;" @click="handleScreen()"/>
                <span style="padding:10px;"></span>
                <img src="../../../assets/img/shuaxin.png" style="width:20px;height:20px;cursor:pointer;" @click="refresh()"/>
                <span style="padding:10px;"></span>
                <img src="../../../assets/img/tuichu.png" style="width:20px;height:20px;cursor:pointer;" @click="closeScreen()"/>
              </div>
              <dv-decoration-8 :reverse="true" class="title_right" :color="['#008CFF', '#00ADDD']"/>
            </el-col>
          </el-row>

          <!-- 主体部分 -->
          <!--主体上部（分为左中右三部分）-->
          <el-row>
            <!-- 第一列 -->
            <el-col :span="6">
              <!--三角柱图部分 -->
              <div class="left_box1">
                <div class="box_title">设备统计图</div>
                <dv-border-box-12>
                  <dv-conical-column-chart :config="left1" style="width:90%;height:300px;margin-left:15px;" />
                </dv-border-box-12>
              </div>
              <!--横柱状图部分（胶囊柱图） -->
              <div class="left_box2">
                <div class="box_title">用户统计图</div>
                <dv-border-box-12 style="padding-top:50px;">
                  <dv-capsule-chart :config="left2" style="width:90%;height:260px" />
                </dv-border-box-12>
              </div>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="12">
              <div class="m_box">
                <dv-border-box-12>
                  <!--地图区域-->
                  <div ref="map">
                    <!--地图实例-->
                    <baidu-map
                      class="bm-view"
                      :scroll-wheel-zoom="true"
                      :center="location"
                      :zoom="zoom"
                      @ready="createMap"
                      ak="Q3Qi6sNlKeBBSVCLXgkeHTOqxi33v2QD">
                      <!--地图显示-->
                      <bm-view style="width:100%; height:630px;flex:1;border-radius:15px;"></bm-view>
                      <!-- 标记点组件 -->
                      <bm-marker :position="{lng: model.lng, lat: model.lat}"/>
                    </baidu-map>
                  </div>
                </dv-border-box-12>
              </div>
            </el-col>
            <!-- 第三列 -->
            <el-col :span="6">
              <!-- 柱状图部分 -->
              <div class="right_box1">
                <div class="box_title" style="z-index:9999;">设备状态统计图</div>
                <dv-border-box-12>
                  <div id="right1" style="width:95%;height:300px;flex:1;"></div> <!--必须要写height，否则图形出不来-->
                </dv-border-box-12>
              </div>
              <!-- 饼图部分 -->
              <div class="right_box2">
                <div class="box_title">报警分类统计图</div>
                <el-select v-model="deviceTypeId" placeholder="请选择设备类型" class="box_select"
                           style="width:230px;z-index:99999;border-radius:3px;border:1px solid #F8F8FF;" @change="right2Change">
                  <el-option
                    style="height:30px;line-height:30px;font-size:18px;"
                    v-for="item in deviceTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <dv-border-box-12 :reverse="true">
                  <div id="right2" style="width:99%;height:310px;"></div> <!--必须要写height，否则图形出不来-->
                </dv-border-box-12>
              </div>

            </el-col>
          </el-row>
          <!--主体下部-->
          <el-row>
            <div class="b_box">
              <div class="box_title">事件日志</div>
              <dv-border-box-12 style="padding-top:60px;">
                <dv-scroll-board
                  :config="table_options"
                  style="width:98%;height:230px;margin-left: 15px;"
                  oddRowBGC="#fff" @click="tableClick"/>
              </dv-border-box-12>
            </div>
          </el-row>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { BaiduMap, BmView, BmMarker } from 'vue-baidu-map';
import { deviceQtyPerDept, userQtyPerDept, lineStatusPerDevMId, eventTypePerDevMId } from '@/api/business/bigscreen';
import { listEvent } from "@/api/business/event";
import screenfull from 'screenfull';
import { MessageBox } from 'element-ui'

export default {
  components: {
    BaiduMap,
    BmMarker,
    BmView
  },
  data () {
    return {
      loading: true, //loading图

      /*****************************数据与地图区域******************************/
      // 左1设备统计（按机构统计设备数量）锥形柱图
      left1: {
        data: [],
        showValue: true
      },

      // 左2用户统计（按机构统计用户数量）胶囊柱图
      left2: {
        data: [],
        showValue: true
      },

      // 右1设备状态统计（按在线、离线统计）多柱子柱图数据
      right1_allData: {}, //用于保存接口返回值的所有有用数据
      right1_options: {},

      // 右2报警分类统计（先按种类筛选，再按报警类型统计）饼图数据
      right2_allData: {}, //用于保存接口返回值的所有有用数据
      right2_options: {}, //用于图形的数据
      deviceTypeId: '', // 下拉框选中结果
      deviceTypes: [ // 下拉框内容
        //{value: 'Option1',label: 'Option1'},
      ],

      // 底部轮播表格数据
      table_allData:{},
      table_options:{},

      // 地图相关
      location: { // 地图显示的中心坐标 (默认为蓟州区政府)
        lng: 117.414961,
        lat: 40.051539
      },
      model: {
        // lng: 117.414961,
        // lat: 40.051539,
        lng: '',
        lat: '',
        address: '' // 自动搜索时的地址输入
      },
      zoom: 15, // 缩放，在市区15基本上就可以看附近的一些街道了，在蓟州区需要调整为16
      BMap: null, // 地图初始化测试用
      map: null
      /*****************************数据与地图区域******************************/

      // 在此之上补充变量
    }
  },
  mounted () {
    this.cancelLoading(); //加载loading图

    this.deviceQtyPerDept(); //左一（设备统计三角柱图）
    this.userQtyPerDept(); //左二（用户统计胶囊柱图）

    this.lineStatusPerDevMId(); //右一（设备状态统计图）
    this.eventTypePerDevMId(); //右二（报警分类统计图）

    this.eventTable(); //最下面的轮播表格

    //测试用
    this.testInterface();
  },
  methods: {
    //测试方法
    testInterface(){
      // deviceQtyPerDept().then(response => {
      //   console.log('获取设备统计接口返回值==', response);
      // });
      // userQtyPerDept().then(response => {
      //   console.log('获取用户统计接口返回值==', response);
      // });
      // lineStatusPerDevMId().then(response => {
      //   console.log('获取设备状态统计接口返回值==', response);
      // });
      // eventTypePerDevMId().then(response => {
      //   console.log('获取报警分类统计接口返回值==', response);
      // });
    },

    /****************************以下是整体屏幕操作相关方法********************************/
    //loading图标
    cancelLoading(){
      setTimeout(() => {
        this.loading = false
      }, 500);
    },
    //时间格式化
    getDate(){
      let date=new Date();
      let year=date.getFullYear();
      let month=date.getMonth()+1;
      let day=date.getDate();
      let week = '日一二三四五六'.charAt(date.getDay());
      return year+'年'+month+'月'+day+'日'+' '+'周'+week;
    },
    //全屏操作
    handleScreen(){
      if(!screenfull.isEnabled){
        return false;
      }
      // screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
      screenfull.toggle();
    },
    //刷新操作
    refresh(){
      location.reload();
    },
    closeScreen(){
      MessageBox.confirm('确定退出大屏吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.close();
        return false;
      }).catch(() => { })
    },
    /****************************以上是整体屏幕操作相关方法********************************/

    /**************************以下是统计图片数据初始化相关方法*****************************/
    //数据初始化
    resetAll(){
      this.left1={
        data: [],
        showValue: true
      };
      this.left2={
        data: [],
        showValue: true
      };
    },
    //（左一）设备统计图
    deviceQtyPerDept(){
      var that=this;
      deviceQtyPerDept().then(response => {
        console.log('获取设备统计接口返回值==',response);
        var data=[];
        var arr=response.data;
        for(var i=0;i<arr.length;i++){
          var obj={};
          obj.name=arr[i].name.substr(0,5);
          obj.value=arr[i].qty;
          data.push(obj);
        }
        that.left1={
          data:data,
          showValue: true
        };
      })

      // if (this.left1.data.length === 0) {
      //   this.left1.data = [
      //     { name: '周口', value: 55 },
      //     { name: '南阳', value: 120 },
      //     { name: '西峡', value: 71 },
      //     { name: '驻马店', value: 66 },
      //     { name: '新乡', value: 80 },
      //     { name: '信阳', value: 35 },
      //     { name: '漯河', value: 15 },
      //   ];
      // }
      that.left1={...that.left1}; //强制刷新依赖的数据
      console.log('left1==',that.left1);
    },
    //（左二）用户统计图
    userQtyPerDept(){
      var that=this;
      userQtyPerDept().then(response => {
        console.log('获取用户统计接口返回值==',response);
        var data=[];
        var arr=response.data;
        for(var i=0;i<arr.length;i++){
          var obj={};
          obj.name=arr[i].name.substr(0,5);
          obj.value=arr[i].qty;
          data.push(obj);
        }
        that.left2={
          data:data,
          showValue: true
        };
      })

      // if(this.left2.data.length==0){
      //   this.left2.data = [
      //     { name: '周口', value: 55 },
      //     { name: '南阳', value: 120 },
      //     { name: '西峡', value: 78 },
      //     { name: '驻马店', value: 66 },
      //     { name: '新乡', value: 80 },
      //     { name: '信阳', value: 45 },
      //     { name: '漯河', value: 29 },
      //   ]
      // }
      that.left2={...that.left2}; //强制刷新依赖的数据
      console.log('left2==',that.left2);
    },
    //（右一）设备状态统计图
    lineStatusPerDevMId(){
      var that=this;
      lineStatusPerDevMId().then(response => {
        console.log('获取设备状态统计接口返回值==', response);
        that.right1_allData=response.data; //先保存所有的有用数据
        //1：生成横坐标title
        var xTitle=[]; //横坐标title
        for(var i=0;i<that.right1_allData.length;i++){
          var title=that.right1_allData[i].name;
          xTitle.push(title);
        }
        //2：生成在线与离线数据
        var dataOnline=[];
        var dataOffline=[];
        for(var i=0;i<that.right1_allData.length;i++){
          var aType=that.right1_allData[i].types;
          //只有一项数据
          if(aType.length==1){ //要么在线要么离线，另外一个是0
            if(aType[0].type=="online"){
              dataOnline.push(aType[0].qty);
              dataOffline.push(0);
            }
            if(aType[0].type=="offline"){
              dataOffline.push(aType[0].qty);
              dataOnline.push(0);
            }
          }
          if(aType.length==2){ //在线与离线都有数据
            for(var j=0;j<aType.length;j++){
              if(aType[j].type=="online"){
                dataOnline.push(aType[j].qty);
              }
              if(aType[j].type=="offline"){
                dataOffline.push(aType[j].qty);
              }
            }
          }
        }

        console.log("右一设备状态统计图获取的图像对象", this.$echarts);
        that.right1_options = {
          legend: {
            data: ['在线', '离线'],
            type: 'plain',
            right: '2%', // 展示位置，具体可查看api
            top: '30px',
            textStyle: {
              color: 'rgba(255,255,255,.5)' // 文字颜色
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          grid: {
            left: '3%',
            top: '80px',
            right: '2%',
            bottom: '5px',
            containLabel: true
          },
          xAxis: [{ //横坐标title数据
            type: 'category',
            data: xTitle, //上面动态获取
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                width: 1,
                type: 'solid'
              }
            },

            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            minInterval: 1,
            axisLabel: {
              // formatter: '{value} %'
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,.1	)',
                width: 1,
                type: 'solid'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }],
          series: [
            {
              type: 'bar',
              name: '在线',
              data: dataOnline,
              barWidth: '20%', // 柱子宽度
              // barGap: 1, //柱子之间间距
              itemStyle: {
                normal: {
                  color: '#2f89cf', // 柱子颜色
                  opacity: 1,
                  barBorderRadius: 5
                }
              }
            },
            {
              type: 'bar',
              name: '离线',
              data: dataOffline,
              barWidth: '20%', // 柱子宽度
              // barGap: 1, //柱子之间间距
              itemStyle: {
                normal: {
                  color: '#27d08a', // 柱子颜色
                  opacity: 1,
                  barBorderRadius: 5 // 柱子菱角
                }
              }
            }
          ]
        }
        this.right1_options = { ...this.right1_options }
        var cChart = this.$echarts.init(document.getElementById('right1')) // 图表初始化
        console.log("右一设备状态统计图获取的图像对象cChart==", cChart)
        window.onresize=cChart.resize; //如果容器变大小，适应从新构图
        cChart.setOption(this.right1_options, { notMerge: true }) // 生成图表
      });//接口返回结束

      // console.log('获取的图像对象', this.$echarts);
      // this.right1_options = {
      //   legend: {
      //     data: ['内部', '外部'],
      //     type: 'plain',
      //     right: '2%', // 展示位置，具体可查看api
      //     top: '30px',
      //     textStyle: {
      //       color: 'rgba(255,255,255,.5)' // 文字颜色
      //     }
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: { type: 'shadow' }
      //   },
      //   grid: {
      //     left: '3%',
      //     top: '80px',
      //     right: '2%',
      //     bottom: '5px',
      //     containLabel: true
      //   },
      //   xAxis: [{
      //     type: 'category',
      //     // data: data.titleList,
      //     data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: 'rgba(255,255,255,.1)',
      //         width: 1,
      //         type: 'solid'
      //       }
      //     },

      //     axisTick: {
      //       show: false
      //     },
      //     axisLabel: {
      //       interval: 0,
      //       // rotate:50,
      //       show: true,
      //       splitNumber: 15,
      //       textStyle: {
      //         color: 'rgba(255,255,255,.6)',
      //         fontSize: '12'
      //       }
      //     }
      //   }],
      //   yAxis: [{
      //     type: 'value',
      //     axisLabel: {
      //       // formatter: '{value} %'
      //       show: true,
      //       textStyle: {
      //         color: 'rgba(255,255,255,.6)',
      //         fontSize: '12'
      //       }
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: 'rgba(255,255,255,.1	)',
      //         width: 1,
      //         type: 'solid'
      //       }
      //     },
      //     splitLine: {
      //       lineStyle: {
      //         color: 'rgba(255,255,255,.1)'
      //       }
      //     }
      //   }],
      //   series: [
      //     {
      //       type: 'bar',
      //       name: '内部',
      //       // data: data.oneList,
      //       data: [1500, 1200, 600, 200, 300, 300, 900],
      //       barWidth: '20%', // 柱子宽度
      //       // barGap: 1, //柱子之间间距
      //       itemStyle: {
      //         normal: {
      //           color: '#2f89cf', // 柱子颜色
      //           opacity: 1,
      //           barBorderRadius: 5
      //         }
      //       }
      //     },
      //     {
      //       type: 'bar',
      //       name: '外部',
      //       // data: data.twoList,
      //       data: [1500, 1200, 600, 200, 300, 300, 900],
      //       barWidth: '20%', // 柱子宽度
      //       // barGap: 1, //柱子之间间距
      //       itemStyle: {
      //         normal: {
      //           color: '#27d08a', // 柱子颜色
      //           opacity: 1,
      //           barBorderRadius: 5 // 柱子菱角
      //         }
      //       }
      //     }
      //   ]
      // }
      // this.right1_options = { ...this.right1_options }
      // var cChart = this.$echarts.init(document.getElementById('right1')) // 图表初始化
      // console.log('获取的图像对象cChart==', cChart)
      // window.onresize=cChart.resize; //如果容器变大小，适应从新构图
      // cChart.setOption(this.right1_options, { notMerge: true }) // 生成图表
    },
    //（右二）报警分类统计图（初始加载的默认饼图：显示第一组数据）
    eventTypePerDevMId(){
      var that=this;
      eventTypePerDevMId().then(response => {
        console.log('获取报警分类统计接口返回值==', response);
        that.right2_allData=response.data; //先保存所有的有用数据
        for(var i=0;i<that.right2_allData.length;i++){
          //1：先生成下拉列表中的数据deviceTypes
          var obj1={};
          obj1.value=that.right2_allData[i].id;
          obj1.label=that.right2_allData[i].name;
          that.deviceTypes.push(obj1);
        }
        console.log('下拉数据that.deviceTypes==',that.deviceTypes);
        if(that.right2_allData.length>0){
          //2:饼图默认数据取第一项的数据
          that.deviceTypeId=that.right2_allData[0].id; //赋初始值
          var data=[]; //饼图数据数组（name与value键值对）
          var dArr=that.right2_allData[0].types; //取出返回值中的第一项数据集合
          for(var i=0;i<dArr.length;i++){
            var obj={};
            obj.name=dArr[i].type;
            obj.value=dArr[i].qty;
            data.push(obj);
          }
          console.log('饼图数据data==',data);
          //3:生成图像数据
          that.right2_options={
            series: [
              {
                type: 'pie',
                left: '5%',
                top: '20%',
                center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
                radius: ['39%', '50%'],
                label: {
                  normal: {
                    formatter: '{b}{c}({d}%)',
                    textStyle: {
                      fontWeight: 'normal',
                      fontSize: 14
                    }
                  }
                },
                data: data, //默认赋值第一组数据
                insideLabel: {
                  show: true,
                },
              }
            ]
          } //图像数据生成结束
          console.log("右二报警分类统计图获取的图像对象that.$echarts",that.$echarts);
          that.right2_options={...that.right2_options};
          var pChart=that.$echarts.init(document.getElementById('right2')) //图表初始化
          console.log("右二获取报警分类统计图像对象pChart==", pChart)
          pChart.setOption(that.right2_options,{ notMerge:true})  //生成图表
        }
      });//接口返回结束


      // console.log('获取的图像对象this.$echarts', this.$echarts)
      // this.right2_options = {
      //   series: [
      //     {
      //       type: 'pie',
      //       left: '0%',
      //       top: '20%',
      //       center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
      //       radius: ['39%', '50%'],
      //       label: {
      //         normal: {
      //           formatter: '{b}{c}({d}%)',
      //           textStyle: {
      //             fontWeight: 'normal',
      //             fontSize: 15
      //           }
      //         }
      //       },
      //       data: [
      //         { name: '百事可乐', value: 32 },
      //         { name: '哇哈哈', value: 65 },
      //         { name: '康师傅', value: 44 }
      //       ],
      //       insideLabel: {
      //         show: true
      //       }
      //     }
      //   ]
      // }
      // this.right2_options = { ...this.right2_options }
      // var pChart = this.$echarts.init(document.getElementById('right2')) // 图表初始化
      // console.log('获取的图像对象pChart==', pChart)
      // pChart.setOption(this.right2_options, { notMerge: true }) // 生成图表
    },
    //右二饼图下拉触发
    right2Change(e){
      var that=this;
      console.log("下拉选择参数e==",e);
      var id=e;
      var dArr=[];
      var data=[]; //饼图数据数组（name与value键值对）
      for(var i=0;i<that.right2_allData.length;i++){
        if(that.right2_allData[i].id==id){
          dArr=that.right2_allData[i].types;
          break;
        }
      }
      for(var i=0;i<dArr.length;i++){
        var obj={};
        obj.name=dArr[i].type;
        obj.value=dArr[i].qty;
        data.push(obj);
      }
      console.log('饼图数据data==',data);
      //3:生成图像数据
      that.right2_options={
        series: [
          {
            type: 'pie',
            left: '5%',
            top: '20%',
            center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ['39%', '50%'],
            label: {
              normal: {
                formatter: '{b}{c}({d}%)',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14
                }
              }
            },
            data: data, //默认赋值第一组数据
            insideLabel: {
              show: true,
            },
          }
        ]
      } //图像数据生成结束
      console.log("右二报警分类统计图获取的图像对象that.$echarts",that.$echarts);
      that.right2_options={...that.right2_options};
      var pChart=that.$echarts.init(document.getElementById('right2')) //图表初始化
      console.log("右二获取报警分类统计图像对象pChart==", pChart)
      pChart.setOption(that.right2_options,{ notMerge:true})  //生成图表
    },
    /**************************以上是统计图片数据初始化相关方法*****************************/

    /******************************以下是地图操作相关方法**********************************/
    createMap ({ BMap, map }) {
      console.log('执行地图初始化')
      this.BMap=BMap;
      this.map=map;
      // 百度地图API功能
      // this.location.lng=117.414961; //定义地图中心点（在添加状态无数据时，默认为蓟州区政府）
      // this.location.lat=40.051539;
      this.location.lng = this.model.lng === '' ? 117.414961 : this.model.lng
      this.location.lat = this.model.lat === '' ? 40.051539 : this.model.lat
      this.zoom = 15 // 缩放，市区15基本上就可以看附近的一些街道了，蓟州区需要调整为16
    },

    /******************************以上是地图操作相关方法**********************************/
    eventTable(){
      var that=this;
      var queryParams= {  //表格上方的大查询条件参数
        pageNum: 1,
        pageSize: 20,
      };
      listEvent(queryParams).then(response => {
        console.log("获取底部表格接口返回值==",response);
        that.table_allData=response.rows;
        //生成表格数组套数组格式的数据
        var data=[];
        for(var i=0;i<that.table_allData.length;i++){
          var aObj=[];
          aObj.push(that.table_allData[i].devName);
          aObj.push(that.table_allData[i].createDate);
          aObj.push(that.table_allData[i].callBody);
          aObj.push(that.table_allData[i].calleeName);
          aObj.push(that.table_allData[i].calleePhone);
          aObj.push(that.table_allData[i].longitude);
          aObj.push(that.table_allData[i].latitude);
          aObj.push(that.table_allData[i].devAddress);
          data.push(aObj);
        }
        that.table_options = {
          header: ['设备名称', '事件时间', '事件描述', '联系人', '联系电话', '经度', '纬度', '地址'],
          columnWidth: [50, 200, 250, 250, 100, 200, 150, 150, 500], //对应 编号、设备名称、事件时间、事件描述、联系人、联系电话、经度、纬度、地址
          data: data,
          index: true,
          // columnWidth: [50],
          align: ['center'],
          evenRowBGC: '#020308',
          oddRowBGC: '#382B47',
          headerBGC: '#020308'
        };
        that.table_options={...that.table_options};
      });

      // this.table_options = {
      //   header: ['设备名称', '事件时间', '事件描述', '联系人', '联系电话', '经度', '纬度', '地址'],
      //   columnWidth: [50, 200, 250, 250, 100, 200, 150, 150, 500], //对应 编号、设备名称、事件时间、事件描述、联系人、联系电话、经度、纬度、地址
      //   data: [
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '事件清除',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '燃气泄露',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '设备已复位','王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '事件清除',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '燃气泄露',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '设备已复位','王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '事件清除',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '燃气泄露',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '设备已复位','王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105'],
      //     ['9M002E1GDF02272', '2024-05-17 13:54:54', '事件清除',  '王泽', '0431-76792134', '0', '0', '天津市蓟州区下仓镇王指挥村村10排105']
      //   ],
      //   index: true,
      //   // columnWidth: [50],
      //   align: ['center'],
      //   evenRowBGC: '#020308',
      //   oddRowBGC: '#382B47',
      //   headerBGC: '#020308'
      // };

    },
    tableClick(config){
      console.log('config', config);
      // console.log('config.ceil', config.ceil);
      // console.log('config.rowIndex', config.rowIndex);
      var tArr=config.row;
      this.model.lng=tArr[6];
      this.model.lat=tArr[7];
      this.location.lng=this.model.lng;
      this.location.lat=this.model.lat;
      this.model={...this.model};
      this.location={...this.location};
    },

    //在此之上补充方法
  }
}
</script>

<style lang="scss">
  /***************以下为大屏整体参数(完全引用原代码)****************/
  .allPage {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    //width: 1536px;
    //height: 864px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    overflow: hidden;
  }
  .bg {
    //整体页面背景
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../../../assets/img/bg.png"); //背景图
    background-size: cover; //背景尺寸
    background-position: center center; //背景位置
  }
  /***************以下为大屏开发区域（使用中）****************/
  /***************顶部区域****************/
  .title_left { //顶部左边装饰效果
    width: 100%;
    height: 50px;
    margin-top: 16px;
  }
  .title_right { //顶部右边装饰效果
    width: 100%;
    height: 50px;
  }
  .title_center { //顶部中间装饰效果
    width: 100%;
    height: 50px;
  }
  .title_text { //顶部中间文字数据可视化系统
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-top: 15px;
    color: #008cff;
  }
  .title_time { //顶部左侧时间日期
    float: left;
    margin-left: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px;
    color: #ffffff;
  }

  /***************内容区域****************/
  .left_box1 { //左1模块
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }
  .left_box2 { //左2模块
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }
  .m_box{ //地图模块
    height: 630px;
    width: 100%;
    margin-bottom: 10px;
  }
  .right_box1 { //右1模块
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }
  .right_box2 { //右2模块
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }
  .b_box{ //底部日志模块
    height: 310px;
    width: 100%;
    position: relative;
  }
  .box_title{ //统计图的文字标题
    position: absolute;
    top: 10px;
    left:20px;
    width: 150px;
    height: 30px;
    color: #FFFAFA;
    font-size: 20px;    text-align: left;
    font-family: MicrosoftYaHei;
    line-height: 30px;
  }
  //设备类型下拉框样式
  .box_select{
    position: absolute;
    top: 10px;
    right:20px;
  }
  /***************以上为大屏开发区域（使用中）****************/

</style>
